<template>
	<view>
		<view class="header_bottom">
			<text @click="relist(1)" :class="action==1?'active':''">全部</text>
			<text @click="relist(2)" :class="action==2?'active':''">待支付</text>
			<text @click="relist(3)" :class="action==3?'active':''">代发货</text>
			<text @click="relist(4)" :class="action==4?'active':''">已完货</text>
			<text @click="relist(5)" :class="action==5?'active':''">待评价</text>
			<!-- <text @click="clearcate(4)" :class="action==4?'active':''" style="color:blue">{{catetitle}}</text> -->
		</view>

		<view class="box">
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1-title">
						订单编号：1232432323
					</view>
					<view class="box1-1-title1">
						等待付款
					</view>
				</view>
				<view class="box1-2">
					<image src="../../static/shop1.png" mode=""></image>
					<view class="box1-2-1">
						<view class="box1-2-1text">
							红色皮革简约迷你斜挎包/轻奢时...
						</view>
						<view class="box1-2-1text1">
							2020年，格子色
						</view>
						<view class="box1-2-1text2">
							￥1200.00
						</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="box1-3">
					<view class="box1-3-2">
						去支付
					</view>
					<view class="box1-3-1">
						取消订单
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1-title">
						订单编号：1232432323
					</view>
					<view class="box1-1-title1">
						等待付款
					</view>
				</view>
				<view class="box1-2">
					<image src="../../static/shop1.png" mode=""></image>
					<view class="box1-2-1">
						<view class="box1-2-1text">
							红色皮革简约迷你斜挎包/轻奢时...
						</view>
						<view class="box1-2-1text1">
							2020年，格子色
						</view>
						<view class="box1-2-1text2">
							￥1200.00
						</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="box1-3">
					<!-- 	<view class="box1-3-2">
						去支付
					</view> -->
					<view class="box1-3-1">
						我要催单
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1-title">
						订单编号：1232432323
					</view>
					<view class="box1-1-title1">
						等待付款
					</view>
				</view>
				<view class="box1-2">
					<image src="../../static/shop1.png" mode=""></image>
					<view class="box1-2-1">
						<view class="box1-2-1text">
							红色皮革简约迷你斜挎包/轻奢时...
						</view>
						<view class="box1-2-1text1">
							2020年，格子色
						</view>
						<view class="box1-2-1text2">
							￥1200.00
						</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="box1-3">
					<!-- <view class="box1-3-2">
						去支付
					</view> -->
					<view class="box1-3-1">
						确认收货
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1-title">
						订单编号：1232432323
					</view>
					<view class="box1-1-title1">
						等待付款
					</view>
				</view>
				<view class="box1-2">
					<image src="../../static/shop1.png" mode=""></image>
					<view class="box1-2-1">
						<view class="box1-2-1text">
							红色皮革简约迷你斜挎包/轻奢时...
						</view>
						<view class="box1-2-1text1">
							2020年，格子色
						</view>
						<view class="box1-2-1text2">
							￥1200.00
						</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="box1-3">
					<view class="box1-3-2">
						去评价
					</view>
					<view class="box1-3-1">
						暂不评价
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 1
			}
		},
		methods: {
			relist(e) {
				this.action = e
			}
		}
	}
</script>

<style lang="scss">
	.header_bottom {
		flex: 1;
		background-color: white;
		// padding: 20rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 28upx;
		color: #333;
		font-weight: 600;

		>text {
			line-height: 80rpx;

		}
	}

	.active {
		color: red;
		border-bottom: red solid 4rpx;
	}

	.box {
		margin-top: 20rpx;
		width: 100vw;
		background-color: white;

		.box1 {
			width: 90vw;
			margin: 0 auto;

			.box1-1 {
				display: flex;
				padding: 20rpx 0;
				justify-content: space-between;

				.box1-1-title {
					font-size: 30rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #6B6B6B;
					// line-height: 0px;
				}

				.box1-1-title1 {
					font-size: 30rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FF492B;
					line-height: 48rpx;
				}
			}

			.box1-2 {
				display: flex;

				>image {
					width: 176rpx;
					height: 176rpx;
				}

				.box1-2-1 {
					margin-left: 20rpx;

					.box1-2-1text {
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #000000;
						line-height: 36rpx;
					}

					.box1-2-1text1 {
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #CCCCCC;
						line-height: 100rpx;
					}

					.box1-2-1text2 {
						font-size: 32rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: bold;
						color: #FF1C17;
						line-height: 28rpx;
					}
				}
			}

			.box1-3 {
				display: flex;
				flex-direction: row-reverse;
				padding: 20rpx 0;

				.box1-3-1 {
					width: 158rpx;
					height: 64rpx;
					border-radius: 4px 4px 4px 4px;
					opacity: 1;
					border: 1px solid rgba(0, 0, 0, 0.3);
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					text-align: center;
					color: #666666;
					line-height: 64rpx;
				}

				.box1-3-2 {
					margin-left: 20rpx;
					width: 158rpx;
					height: 64rpx;
					border-radius: 4px 4px 4px 4px;
					opacity: 1;
					background-color: red;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					text-align: center;
					color: #ffffff;
					line-height: 64rpx;
				}
			}
		}
	}

	.xian {
		width: 686rpx;
		margin: 0 auto;
		padding: 20rpx 0;
		height: 0px;
		opacity: 1;
		border: 2rpx solid #F7F7F7;
	}
</style>
